<script setup lang="ts">
import { defineOptions } from "vue";
import { useUserStoreHook } from "@/store/modules/user";

const { permissions, buttonPermissions } = useUserStoreHook();

defineOptions({
  name: "PermissionButtonLogin"
});
</script>

<template>
  <div>
    <p class="mb-2!">当前拥有的code列表：{{ permissions }}</p>
    <p class="mb-2!">当前拥有的按钮权限列表：{{ buttonPermissions }}</p>
    <p v-show="permissions?.[0] === '*:*:*'" class="mb-2!">
      *:*:* 代表拥有全部按钮级别权限
    </p>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">
          组件方式判断权限（新格式：路由名称:按钮名称）
        </div>
      </template>
      <el-space wrap>
        <Perms value="PermissionButtonLogin:add">
          <el-button plain type="warning">
            拥有权限：'PermissionButtonLogin:add' 可见
          </el-button>
        </Perms>
        <Perms :value="['PermissionButtonLogin:edit']">
          <el-button plain type="primary">
            拥有权限：['PermissionButtonLogin:edit'] 可见
          </el-button>
        </Perms>
        <Perms
          :value="[
            'PermissionButtonLogin:add',
            'PermissionButtonLogin:edit',
            'PermissionButtonLogin:delete'
          ]"
        >
          <el-button plain type="danger">
            拥有权限：['PermissionButtonLogin:add',
            'PermissionButtonLogin:edit', 'PermissionButtonLogin:delete'] 可见
          </el-button>
        </Perms>
      </el-space>
    </el-card>

    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">
          指令方式判断权限（新格式：路由名称:按钮名称）
        </div>
      </template>
      <el-space wrap>
        <el-button v-perms="'PermissionButtonLogin:add'" plain type="warning">
          拥有权限：'PermissionButtonLogin:add' 可见
        </el-button>
        <el-button
          v-perms="['PermissionButtonLogin:edit']"
          plain
          type="primary"
        >
          拥有权限：['PermissionButtonLogin:edit'] 可见
        </el-button>
        <el-button
          v-perms="[
            'PermissionButtonLogin:add',
            'PermissionButtonLogin:edit',
            'PermissionButtonLogin:delete'
          ]"
          plain
          type="danger"
        >
          拥有权限：['PermissionButtonLogin:add', 'PermissionButtonLogin:edit',
          'PermissionButtonLogin:delete'] 可见
        </el-button>
      </el-space>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <div class="card-header">其他页面按钮权限示例</div>
      </template>
      <el-space wrap>
        <el-button v-perms="'PermissionPage:add'" plain type="warning">
          页面权限：'PermissionPage:add' 可见
        </el-button>
        <el-button v-perms="['PermissionPage:edit']" plain type="primary">
          页面权限：['PermissionPage:edit'] 可见
        </el-button>
        <el-button
          v-perms="[
            'PermissionPage:add',
            'PermissionPage:edit',
            'PermissionPage:delete'
          ]"
          plain
          type="danger"
        >
          页面权限：['PermissionPage:add', 'PermissionPage:edit',
          'PermissionPage:delete'] 可见
        </el-button>
      </el-space>
    </el-card>
  </div>
</template>
